<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="./lib/vue-2.6.10/dist/vue.min.js"></script>
    <link rel="stylesheet" href="./lib/animate.css">
    <title>Document</title>
    <style>
      
      .my-enter,
      .my-leave-to{
        opacity: 0;
        transform: translateY(100px)
      }
      /* v-enter-active 【入场动画的时间段】 */
      /* v-leave-active 【离场动画的时间段】 */
      .my-enter-active,
      .my-leave-active{
        transition: all 100000s ease;
      }


      /* 入场bounceIn  离场： bounceOut */

      .ball{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: red;
      }
      li{
        border: 1px dashed #999;
        margin: 5px;
        line-height: 35px;
        padding-left: 5px;
        font-size: 12px;
      }
      li:hover{
        background-color: hotpink;
        transition: all 0.8s ease;
      }

      /* v-enter【这是一个时间点】 是进入之前，元素的其实状态，此时还没有开始进入 */
      /* v-leave-to【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束 */
      .v-enter,
      .v-leave-to{
        opacity: 0;
        transform: translateY(80px)
      }


     /* v-move and v-leave-active 配合使用，能够实现列表后续的元素 渐渐的漂上来的效果 */
     .v-move{
        transition: all 0.4s ease;
      }
      /* v-enter-active 【入场动画的时间段】 */
      /* v-leave-active 【离场动画的时间段】 */
      .v-enter-active,
      .v-leave-active{
        transition: all 1s ease;
      }
      
     
    </style>
	</head>

	<body>
		
		<div id="app">
      <input type="button" value="toggle" @click="flag=!flag">

      <transition appear>
        <h3 v-if="flag">这时一个h3</h3>
      </transition>
      <hr>

      <input type="button" value="toggle" @click="flag2=!flag2">
      <transition name = "my">
        <h6 v-if="flag2">这时一个h6</h6>
      </transition>
      <hr>

      <input type="button" value="toggle" @click="flag3=!flag3">
      <!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
        <h6 v-if="flag3">这时一个animation css h6</h6>
      </transition> -->
      <!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut">
        <h6 v-if="flag3" class="animated">这时一个animation css h6</h6>
      </transition> -->

      <!-- duration:统一设置入场和离场的动画时长 -->
      <transition enter-active-class="bounceIn" 
      leave-active-class="bounceOut" :duration="{enter: 200,leave: 400}">
        <h2 v-if="flag3" class="animated">这时一个animation css h2</h2>
      </transition>
      <hr>

      <input type="button" value="快到碗里来" @click="flag4=!flag4">
      <transition 
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
      >
          <div class="ball" v-show="flag4"></div>
      </transition>
      

      <hr>

    <div>
      <label for="">ID:
        <input type="text" v-model="id">
      </label>
      <label for="">name:
        <input type="text" v-model="name">
      </label>
        <input type="button" value="add" @click="add">
    </div>
    <ur>
      <transition-group appear tag="ul">
        <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
        {{item.id}} --- {{item.name}}
      </li>
      </transition-group>
      
    </ur>

    </div>
    </div>
    
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
          flag: false,
          flag2: false,
          flag3: false,
          flag4: false,
          id: '',
          name: '',
          list: [
            {id: 1,name: '赵高'},
            {id: 2,name: '秦桧'},
            {id: 3,name: '严嵩'},
            {id: 4,name: '魏忠贤'},
          ]
				},
				methods: {
          beforeEnter(el){
            //起始位置
            el.style.transform="translate(0,0)"
          },
          enter(el) {
            el.offsetWidth
            //enter 表示动画开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
            el.style.transform="translate(150px,450px)"
            el.style.transition="all 1s ease"
            // done()
          },
          afterEnter(el){
            this.flag4 = !this.flag4;
          },
          add(){
            this.list.push({id: this.id, name: this.name})
          },
          del(i){
            this.list.splice(i,1)
          }
         
        },
      })
		</script>
	</body>
</html>
